import React, { useState, useEffect } from "react";
import {
  List,
  Icon,
  Card,
  Input,
  Modal,
  message,
  Button,
  Drawer,
  Table,
  Switch,
  Row,
  Col,
} from "antd";

import axios from "axios";
import servicePath from "../config/apiUrl";
import ClearableLabeledInput from "antd/lib/input/ClearableLabeledInput";
import moment from "moment";
const { confirm } = Modal;
const { TextArea } = Input;

function AddImg(props) {
  const [imgurl, setImgurl] = useState("");
  const [articleType, setArticleType] = useState("");
  const [articleName, setArticleName] = useState("");
  const [homeImg, setHomeImg] = useState([]);
  const initMsg = () => {
    axios({
      method: "post",
      url: servicePath.findAllArticleType,
      withCredentials: true,
    }).then((res) => {
      setHomeImg(res.data.data);
    });
  };
  useEffect(() => {
    initMsg();
  }, []);

  let addType = (e) => {
    axios({
      method: "post",
      url: servicePath.addArticleType,
      data: {articleType,articleName },
      withCredentials: true,
    }).then((res) => {
      message.success("标签添加成功");
      initMsg();
    });
  };
  let handelDelete = (record, text) => {
    axios({
      method: "post",
      url: servicePath.deleteArticleType,
      data: { id: record.id },
      withCredentials: true,
    }).then((res) => {
      message.success("标签成功");
      initMsg();
    });
  };
  let columns = [
    {
      title: "标签名称",
      dataIndex: "articleName",
      key: "articleName",
      ellipsis: true,
    },
    {
        title: "标签id",
        dataIndex: "articleType",
        key: "articleType",
        ellipsis: true,
      },
    // {
    //   title: "是否显示",
    //   dataIndex: "status",
    //   key: "status",
    //   render: (text, record) => (
    //     <Switch
    //       checked={text == 1}
    //       onChange={handelChange.bind(this, record, text)}
    //     />
    //   ),
    // },
    {
      title: "操作",
      dataIndex: "url",
      key: "url",
      render: (text, record) => (
        <Button onClick={handelDelete.bind(this, record, text)}>删除</Button>
      ),
    },
  ];
  return (
    <div>
      <div style={{ display: "flex", marginTop: "20px" }}>
        <Row gutter={16}>
          <Col className="gutter-row" span={12}>
            <Input.Group compact>
              <Input
                style={{ width: "30%" }}
                disabled={true}
                defaultValue="标签名称"
              />
              <Input
                style={{ width: "50%" }}
                onChange={(e) => {
                  setArticleName(e.target.value);
                }}
                defaultValue=""
                value={articleName}
              />
            </Input.Group>
          </Col>
          <Col className="gutter-row" span={12}>
            <Input.Group compact>
              <Input
                style={{ width: "30%" }}
                disabled={true}
                defaultValue="标签唯一id"
              />
              <Input
                style={{ width: "50%" }}
                onChange={(e) => {
                  setArticleType(e.target.value);
                }}
                defaultValue=""
                value={articleType}
              />
            </Input.Group>
          </Col>
          <Col className="gutter-row" span={6} offset={16}>
            <Button
              type="primary"
              onClick={addType}
              block
              style={{ marginTop: "20px" }}
            >
              提交
            </Button>
          </Col>
        </Row>
      </div>

      <Table columns={columns} dataSource={homeImg} />
    </div>
  );
}

export default AddImg;
